<template>
    <div>
        <el-carousel class="banner-container">
            <el-carousel-item v-for="item in banners" :key="item.id">
                <el-image :src="item.url" fit="cover" style="width: 100%; height: 100%" />
            </el-carousel-item>
        </el-carousel>
    </div>
</template>
 
<script>
export default {
    name: 'Banner',
    data() {
        return {
            banners: [
                {
                    id: 1,
                    url: require('@/assets/images/banner1.jpeg'),
                },
                {
                    id: 2,
                    url: require('@/assets/images/banner2.jpeg'),
                },
                {
                    id: 3,
                    url: require('@/assets/images/banner3.jpeg'),
                },


            ]
        }
    },
    methods: {

    }
}
</script>
 
<style lang="less" scoped>
.banner-container {
    width: 100%;
    max-height: 600px;
    /deep/ .el-carousel__container {
        height: 400px;
    }
}
</style>